<div class="f-utils-fill-flex-column h-100 pt-2 pl-2 border-bottom">
  <div class="border-bottom pb-2">
    <button class="btn btn-primary mr-2" (click)="addItem()">添加视图</button>
    <button class="btn btn-secondary mr-2" (click)="removeItem()">删除视图</button>
    <button class="btn btn-secondary mr-2" (click)="moveUpItem()">上移</button>
    <button class="btn btn-secondary mr-2" (click)="moveDownItem()">下移</button>
  </div>
  <div class="f-utils-fill-flex-row">
    <div class="f-utils-fill f-utils-overflow-auto mt-1">

      <div class="item-container" *ngFor="let item of viewItems"
        [class.active]="selectedItem && item.id===selectedItem.id" (click)="changeSelectedView(item)">
        <div class="item-link">
          <span class="item-link-text"> {{item.title}} </span>
        </div>
      </div>
    </div>

    <div style="width:400px">
      <app-property-panel [(propertyConfig)]="propertyConfig" [(propertyData)]="propertyData" [showCloseBtn]="false"
        [isPersitOpenState]="true" [(isShowPanel)]="showPropertyPanel" [dynamicControl]="true" isWhiteTheme="true">
      </app-property-panel>
    </div>
  </div>
</div>

<ng-template #footer>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>


<ng-template #viewTypeTmpl>
  <div class="farris-form-controls-inline p-3">

    <div class="farris-group-wrap">
      <div class="form-group farris-form-group">
        <label class="col-form-label">
          <span class="farris-label-text">预置视图</span>
        </label>
        <div class="farris-input-wrap">
          <farris-combo-list [(ngModel)]="selectedViewType" idField="id" textField="name" [data]="viewTypeOptions"
            [editable]="false" [enableClear]="false" [enableCancelSelected]="false">
          </farris-combo-list>
        </div>
      </div>
    </div>
  </div>

</ng-template>


<ng-template #viewTypeBtnTmpl>
  <button class="btn btn-primary btn-lg" (click)="confirmNewView()">确定</button>
  <button class="btn btn-secondary btn-lg" (click)="cancelNewView()">取消</button>
</ng-template>